<html>
	<head>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/redmond/jquery-ui.css">
		<link rel="stylesheet" href="../css/jquery-ui-plugins-textarea.css" type="text/css"/>
		
		<style type="text/css">
			body {
				font-size: 12px;
			}
			
			fieldset {
				width: 550px;
			}
			
			.red {
				color: red;
			}
			
			.blue {
				color: blue;
			}
			
			.bold {
				font-weight: bold;
			}
			
			span.ui-button-text {
				padding: 4px 7px !important;
			}
			
			#dependentCodeSample {
				display: none;
			}
			
			div.optionField {
				clear: both;
				height: 35px;
			}
			
			div.optionField label {
				float: left;
				width: 130px;
			}
			
			div.optionField input, div.optionField select {
				float: left;
			}
			
			#setOptionsButton {
				float: right;
			}
			
		</style>
		
	 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-ui-plugins-core.js"></script>
		<script type="text/javascript" src="../js/jquery-ui-plugins-textarea.js"></script>
		
		<script type="text/javascript">
			$(function() {
				$('#tabs').tabs();
				
				$('button').button();
								
				$('#myTextarea').textarea({
					'maxChars': 100, 
					'charLimitMessage': '{ENTERED} of {MAX} characters, {REMAINING} left', 					
					'limitMessageClass': 'red',
					'limitMessageStyle': {'font-weight': 'bold'},
					'beforeChange': function() {
						var $beforeChange = $('#beforeChange');
						$beforeChange.text(Number($beforeChange.text()) + 1);
					},
					'afterChange': function() {
						var $afterChange = $('#afterChange');
						$afterChange.text(Number($afterChange.text()) + 1);
					},
					"create": function() {
						console.log("created!!");
					},
				});				
				
				var $textarea = $('#myTextarea');
				
				$('#remainingButton').click(function() {
					$('#remaining').text($textarea.textarea('remaining'));
					$textarea.focus();
				});
				
				$('#getSelectionButton').click(function() {
					$('#currentSelection').text($textarea.textarea('selectedText'));
					$textarea.focus();
				});
				
				$('#getSelectionStartButton').click(function() {
					$('#selectionStartDisplay').text($textarea.textarea('selectionStart'));
					$textarea.focus();
				});
				
				$('#getSelectionEndButton').click(function() {
					$('#selectionEndDisplay').text($textarea.textarea('selectionEnd'));
					$textarea.focus();
				});
				
				$('#setSelectionButton').click(function() {
					$textarea.textarea('selectedText', $('#selectionStart').val(), $('#selectionEnd').val());
					$textarea.focus();
				});						

				$('#beforeCursorButton').click(function() {
					$('#beforeCursor').text($textarea.textarea('beforeCursor'));
					$textarea.focus();
				});
				
				$('#afterCursorButton').click(function() {
					$('#afterCursor').text($textarea.textarea('afterCursor'));
					$textarea.focus();
				});
				
				$('#replaceSelectionButton').click(function() {
					$textarea.textarea('replaceSelection', $('#replacementText').val());
					$textarea.focus();
				});
				
				$('#destroyButton').click(function() {
					$('#myTextarea').textarea('destroy');
				});
				
				// example of using a function for the maxChars and change options to create two textareas with character maximums that are dependent on each other, 
				// textarea #1 can contain up to 50 characters, textarea #2 can contain up to 10 characters but the combined total for both fields cannot exceed 50
				$('#dependent1').textarea({
					'maxChars': function() {
						var otherTextarea = $('#dependent2');				
						return otherTextarea.val() ? 50 - otherTextarea.val().length : 50;
					},
					'charLimitMessage': '{ENTERED}/{MAX} characters.',
					'limitMessageClass': 'bold',
					'afterChange': function(e, ui) {
						$('#dependent2').textarea('refresh');
					}
				});
				
				$('#dependent2').textarea({
					'maxChars': function() {
						var max = 10;					
						var otherTextarea = $('#dependent1');
						
						if(otherTextarea.val()) {
							var maxOfOther = otherTextarea.textarea('option', 'maxChars');
							maxOfOther = typeof maxOfOther === 'function' ? maxOfOther.apply() : maxOfOther;							
							var charsLeftInOther = maxOfOther - otherTextarea.val().length;							
							var currentLength = $('#dependent2').val().length;
							max = charsLeftInOther > 10 ? 10 : charsLeftInOther + currentLength;
						}
						
						return max;
					},
					'charLimitMessage': '{REMAINING} characters remaining.',
					'afterChange': function(e, ui) {
						$('#dependent1').textarea('refresh');
					}
				});
				
				$('#dependentCodeSampleLink').click(function() {
					var $codeSample = $('#dependentCodeSample');
					
					if($codeSample.is(':visible')) {
						$codeSample.slideUp();
					} else {
						$codeSample.slideDown();
					}
				});
				
				$('#setOptionsButton').click(function() {				
					$('#options input, #options select').each(function() {
						var $input = $(this);
						var id = $input.attr('id');						
						var value = $input.val();
						
						if(value) {
							$('#myTextarea').textarea('option', id, $input.val());
						}						
					});					
				});				
			});
			
		</script>
	</head>
	<body class="theme">
		<div id="tabs">
			<ul>
				<li><a href="#basic-usage">Basic Usage</a></li>
				<li><a href="#dynamic-limit">Dynamic Character Limit</a></li>
			</ul>
			<div id="basic-usage">
				<div>
					<textarea id="myTextarea" rows="10" cols="30"></textarea>
				</div>
				<fieldset id="options">	
					<legend>Options</legend>				
					<div class="optionField">
						<label>Max Chars:</label>
						<input id="maxChars" type="text" value="100"/>
					</div>
					<div class="optionField">
						<label>Char Limit Message:</label>
						<input id="charLimitMessage" type="text" value="{ENTERED} of {MAX} characters, {REMAINING} left" style="width: 400px;"/>
						<div style="font-size: x-small;">Use {MAX}, {ENTERED} and {REMAINING} to insert the current max, entered and remaining character values</div>
					</div>
					<div class="optionField">
						<label>Paste Flicker Fix:</label>
						<input id="pasteFlickerFix" type="text" value="true"/>
					</div>				
					<div class="optionField">
						<label>Limit Message Style:</label>
						<input id="limitMessageStyle" type="text"/>
					</div>
					<div class="optionField">
						<label>Limit Message Class:</label>
						<select id="limitMessageClass">
							<option value="red">Red</option>
							<option value="blue">Blue</option>
						</select>
					</div>			
					<button id="setOptionsButton">Set Options</button>
				</fieldset>
				
				<fieldset>
					<legend>Events</legend>
					<div>
						<label>Before Change Count:</label>
						<span id="beforeChange"/>0</span>
					</div>
					<div>
						<label>After Change Count:</label>
						<span id="afterChange"/>0</span>
					</div>
				</fieldset>
				
				<fieldset>
					<legend>Methods</legend>	
					<div>
						<button id="remainingButton">Remaining</button><span id="remaining"></span>
					</div>
					<div>
						<button id="getSelectionButton">Get Selected Text</button><span id="currentSelection"></span>
					</div>					
					<div>
						<button id="getSelectionStartButton">Get Selection Start</button><span id="selectionStartDisplay"></span>
					</div>					
					<div>
						<button id="getSelectionEndButton">Get Selection End</button><span id="selectionEndDisplay"></span>
					</div>
					<div>
						<label>Start</label><input id="selectionStart"></input>
						<label>End</label><input id="selectionEnd"></input>
						<button id="setSelectionButton">Set Selected Text</button>
					</div>
					<div>
						<button id="beforeCursorButton">Before Cursor</button><span id="beforeCursor"></span>
					</div>
					<div>
						<button id="afterCursorButton">After Cursor</button><span id="afterCursor"></span>
					</div>
					<div>
						<label>Replacement Text</label><input id="replacementText"></input>
						<button id="replaceSelectionButton">Replace Selected Text</button>
					</div>
					<div>
						<button id="destroyButton">Destroy</button>
					</div>					
				</fieldset>
			</div>
			<div id="dynamic-limit">
				<div>
					<h5 style="width: 450px;">This is an Example of using a function for the maxChars and change options to create two textareas with character maximums that are dependent on each other. Textarea #1 can contain up to 50 characters, textarea #2 can contain up to 10 characters but the combined total for both fields cannot exceed 50</h5>
					<div style="float: left; margin-right: 20px;">
						<textarea id="dependent1" style="display: inline;" rows="10" cols="30"></textarea>
					</div>
					<div style="float: left;">
						<textarea id="dependent2" style="display: inline;" rows="10" cols="30"></textarea>
					</div>
					<div style="clear: both;">
						<a id="dependentCodeSampleLink" href="#">Show code sample</a>
						<pre id="dependentCodeSample">							
$('#dependent1').textarea({
	'maxChars': function() {
		var otherTextarea = $('#dependent2');				
		return otherTextarea.val() ? 50 - otherTextarea.val().length : 50;
	},
	'charLimitMessage': '{ENTERED}/{MAX} characters.',
	'limitMessageClass': 'bold',
	'afterChange': function(e, ui) {
		$('#dependent2').textarea('refresh');
	}
});

$('#dependent2').textarea({
	'maxChars': function() {
		var max = 10;					
		var otherTextarea = $('#dependent1');
		
		if(otherTextarea.val()) {
			var maxOfOther = otherTextarea.textarea('option', 'maxChars');
			maxOfOther = typeof maxOfOther === 'function' ? maxOfOther.apply() : maxOfOther;							
			var charsLeftInOther = maxOfOther - otherTextarea.val().length;							
			var currentLength = $('#dependent2').val().length;
			max = charsLeftInOther > 10 ? 10 : charsLeftInOther + currentLength;
		}
		
		return max;
	},
	'charLimitMessage': '{REMAINING} characters remaining.',
	'afterChange': function(e, ui) {
		$('#dependent1').textarea('refresh');
	}
});							
						</pre>
					</div>
				</div>
			</div>				
		</div>				
	</body>
</html>
